CSS 논리 속성 레벨 2: 향상된 쓰기 모드 지원으로 진정한 글로벌 웹 구축하기

수십 년 동안 웹 개발자들은 top, bottom, left, 그리고 right와 같은 물리적인 세계에 뿌리를 둔 어휘를 사용하여 레이아웃을 구축해 왔습니다. 우리는 margin-left, padding-top, 그리고 border-right를 설정했습니다. 이 정신적 모델은 웹이 주로 왼쪽에서 오른쪽, 위에서 아래로 흐르는 매체였을 때 우리에게 잘 맞았습니다. 하지만 웹은 글로벌합니다. 모든 언어와 문화를 위한 플랫폼이며, 그중 많은 문화가 이 단순한 방향 흐름을 따르지 않습니다.

아랍어 및 히브리어와 같은 언어는 오른쪽에서 왼쪽으로 작성됩니다. 전통적인 일본어와 중국어는 위에서 아래로, 오른쪽에서 왼쪽으로 세로로 작성될 수 있습니다. 물리적인 왼쪽에서 오른쪽 CSS 모델을 이러한 쓰기 시스템에 강요하면 레이아웃이 깨지고, 사용자 경험이 저하되며, 코드 재정의가 산더미처럼 쌓이게 됩니다. 이곳에 CSS 논리 속성 및 값이 있으며, 물리적 방향에서 흐름 상대적, 논리적 방향으로의 근본적인 패러다임 전환을 나타냅니다. 레벨 1이 기반을 다졌다면, CSS 논리 속성 레벨 2는 진정한 보편적이고 쓰기 모드를 인식하는 사용자 인터페이스를 구축하는 데 필요한 도구를 제공하여 그림을 완성합니다.

이 종합 가이드는 레벨 2에서 가져온 개선 사항을 심층적으로 살펴보겠습니다. 핵심 개념을 다시 살펴본 후, 빈틈을 메우는 새로운 속성과 값을 탐색하고, 마지막으로 모든 쓰기 모드에 원활하게 적응하는 구성 요소를 구축하여 실제로 적용해 보겠습니다. CSS 레이아웃에 대한 생각을 영원히 바꾸게 될 것입니다.

빠른 복습: 논리 속성의 핵심 개념 (레벨 1)

레벨 2의 추가 사항을 제대로 이해하려면 먼저 레벨 1이 놓은 기초에 대한 탄탄한 이해가 필요합니다. 전체 시스템은 쓰기 모드와 그 결과인 블록 및 인라인 축이라는 두 가지 핵심 개념을 기반으로 구축됩니다.

네 가지 쓰기 모드

writing-mode CSS 속성은 텍스트가 배치되는 방향을 결정합니다. 기본값을 당연하게 여기는 경우가 많지만, 페이지에서 콘텐츠 흐름을 근본적으로 변경하는 몇 가지 값이 있습니다:

• horizontal-tb: 대부분의 서구 언어에 대한 기본값입니다. 텍스트는 왼쪽에서 오른쪽(또는 방향에 따라 오른쪽에서 왼쪽)으로 가로(인라인 축)로 흐르고, 줄은 위에서 아래로(블록 축) 쌓입니다.
• vertical-rl: 전통적인 동아시아 타이포그래피(예: 일본어, 중국어)에 사용됩니다. 텍스트는 위에서 아래로(인라인 축) 세로로 흐르고, 줄은 오른쪽에서 왼쪽(블록 축)으로 쌓입니다.
• vertical-lr: 위의 내용과 유사하지만, 줄은 왼쪽에서 오른쪽(블록 축)으로 쌓입니다. 덜 일반적이지만 몽골어와 같은 일부 맥락에서 사용됩니다.
• sidelong-rl / sidelong-lr: 글자를 옆으로 놓고 싶을 때 특정 사용 사례에 사용됩니다. 일반적인 웹 콘텐츠에서는 덜 일반적입니다.

중요한 개념: 블록 vs. 인라인 축

이것이 가장 중요한 개념입니다. 논리적인 세계에서는 "세로"와 "가로"에 대한 생각을 멈추고 블록과 인라인 축의 관점에서 생각하기 시작합니다. 그들의 방향은 전적으로 writing-mode에 따라 달라집니다.

• 인라인 축: 단일 줄 내에서 텍스트가 흐르는 방향입니다.
• 블록 축: 새 줄이 쌓이는 방향입니다.

이것이 어떻게 작용하는지 살펴보겠습니다:

• 표준 영어(writing-mode: horizontal-tb)에서는 인라인 축이 가로로 실행되고 블록 축이 세로로 실행됩니다.
• 전통적인 일본어(writing-mode: vertical-rl)에서는 인라인 축이 세로로 실행되고 블록 축이 가로로 실행됩니다.

이러한 축이 전환될 수 있기 때문에 width 및 height와 같은 속성이 모호해집니다. width는 가로 축 또는 인라인 축을 따른 크기입니까? 논리 속성은 이 모호성을 해결합니다. 이제 각 축에 대한 시작과 끝이 있습니다:

• block-start: 영어에서는 "top"이지만, 수직 일본어에서는 "right"입니다.
• block-end: 영어에서는 "bottom"이지만, 수직 일본어에서는 "left"입니다.
• inline-start: 영어에서는 "left"이지만, 수직 일본어에서는 "top"입니다.
• inline-end: 영어에서는 "right"이지만, 수직 일본어에서는 "bottom"입니다.

물리적 속성을 논리적 속성으로 매핑 (레벨 1)

레벨 1은 물리적 속성에서 논리적 속성으로의 포괄적인 매핑 세트를 도입했습니다. 다음은 몇 가지 주요 예시입니다:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (포지셔닝용) → inset-inline-start / inset-inline-end
• top / bottom (포지셔닝용) → inset-block-start / inset-block-end

레벨 1은 또한 margin-inline (시작 및 끝) 및 padding-block (시작 및 끝)과 같은 유용한 축약형도 제공했습니다.

레벨 2에 오신 것을 환영합니다: 새로운 점과 그 중요성

레벨 1은 기념비적인 진전이었지만, 몇 가지 눈에 띄는 빈틈을 남겼습니다. float, clear, 및 resize와 같은 특정 기본 CSS 속성에는 논리적 등가물이 없었습니다. 또한 border-radius와 같은 속성은 논리적으로 제어할 수 없어 개발자가 미세한 스타일링을 위해 물리적 속성으로 다시 전환해야 했습니다. 이는 논리적 속성으로 레이아웃의 90%를 구축할 수 있지만, 다른 쓰기 모드에 대해 물리적 재정의가 필요하여 부분적으로 목적을 달성하지 못한다는 것을 의미했습니다.

CSS 논리 속성 레벨 2는 이러한 단점을 직접적으로 해결합니다. 이는 급진적인 새 시스템을 도입하는 것이 아니라, 레벨 1에서 시작된 시스템을 완성하는 것입니다. 이는 두 가지 주요 방법을 통해 이를 달성합니다:

1. 이전 CSS 기능에 대한 새로운 논리 속성 및 값 도입 (float와 같은 물리적인 것).
2. 이전에 무시되었던 복잡한 축약형에 대한 논리 속성 매핑 추가 (border-radius와 같은).

레벨 2를 통해 완전히 흐름 상대적인 스타일링 시스템의 비전이 거의 완성되어, 해킹이나 재정의 없이 모든 곳에서 모든 사람을 위해 복잡하고 아름답고 견고한 구성 요소를 구축할 수 있습니다.

심층 분석: 레벨 2의 새로운 논리 값 및 속성

레벨 2가 개발자 도구 키트에 가져온 가장 영향력 있는 추가 사항을 살펴보겠습니다. 이것들은 빈틈을 메우고 진정한 보편적 구성 요소 설계를 가능하게 하는 도구입니다.

Float 및 Clear: 논리 혁명

float 속성은 수년간 CSS 레이아웃의 초석이었지만, left 및 right 값은 물리적 방향의 정의입니다. 영어에서 단락의 left로 이미지를 float하면 올바르게 보입니다. 그러나 아랍어를 위해 문서 방향을 오른쪽에서 왼쪽(RTL)으로 전환하면 이미지가 텍스트 블록의 "잘못된" 측에 있게 됩니다. 텍스트 블록의 시작인 오른쪽에 있어야 합니다.

레벨 2는 float 속성에 대한 두 가지 새로운 논리 키워드를 도입합니다:

• float: inline-start; 이것은 요소를 인라인 방향의 시작으로 float합니다. LTR 언어에서는 왼쪽입니다. RTL 언어에서는 오른쪽입니다. vertical-rl 쓰기 모드에서는 위쪽입니다.
• float: inline-end; 이것은 요소를 인라인 방향의 끝으로 float합니다. LTR에서는 오른쪽입니다. RTL에서는 왼쪽입니다. vertical-rl에서는 아래쪽입니다.

마찬가지로, float 요소 주위에 콘텐츠를 래핑하는 데 사용되는 clear 속성에도 논리적 대응이 있습니다:

• clear: inline-start; 인라인-시작 측의 float을 지웁니다.
• clear: inline-end; 인라인-끝 측의 float을 지웁니다.

이것은 판도를 바꿉니다. 이제 추가 CSS 없이도 모든 언어 방향에 자동으로 적응하는 고전적인 이미지와 텍스트 랩 레이아웃을 만들 수 있습니다.

논리적 Resize로 향상된 제어

textarea에서 일반적으로 사용되는 resize 속성은 사용자가 요소를 재정의할 수 있도록 합니다. 전통적인 값은 horizontal, vertical, 및 both입니다. 그러나 수직 쓰기 모드에서 "horizontal"은 무엇을 의미할까요? 여전히 물리적 수평 축을 따라 재정의하는 것을 의미하며, 이는 사용자가 의도한 것과 다를 수 있습니다. 사용자는 아마도 줄을 더 길거나 짧게 만들기 위해 인라인 축을 따라 요소를 재정의하기를 원할 것입니다.

레벨 2는 resize에 대한 논리 값을 도입합니다:

• resize: inline; 인라인 축을 따라 재정의할 수 있습니다.
• resize: block; 블록 축을 따라 재정의할 수 있습니다.

resize: block;을 영어의 textarea에 사용하면 사용자가 더 높게 만들 수 있습니다. 수직 쓰기 모드에서 이를 사용하면 사용자가 더 넓게 만들 수 있습니다 (이것이 블록 방향이기 때문입니다). 그냥 작동합니다.

`caption-side`: 테이블 캡션에 대한 논리적 포지셔닝

caption-side 속성은 테이블 caption의 배치를 결정합니다. 이전 값은 top과 bottom이었습니다. 다시 말하지만, 이것들은 물리적입니다. 디자이너의 의도가 테이블 콘텐츠 "앞에" 캡션을 배치하는 것이라면, top은 가로 쓰기 모드에서 작동합니다. 그러나 vertical-rl 모드에서는 블록 흐름의 "시작"이 위쪽이 아니라 오른쪽에 있습니다.

레벨 2는 논리적 솔루션을 제공합니다:

• caption-side: block-start; 캡션을 블록 흐름의 시작에 배치합니다.
• caption-side: block-end; 캡션을 블록 흐름의 끝에 배치합니다.

`text-align`: 논리적 기본값

text-align에 대한 start 및 end 값은 한동안 존재했지만, 논리적 속성 철학의 핵심 부분이며 강조할 가치가 있습니다. text-align: left;를 사용하는 것은 RTL 언어에서 레이아웃 문제를 즉시 일으키는 흔한 실수입니다. 올바르고 현대적인 접근 방식은 항상 다음을 사용하는 것입니다:

• text-align: start; 텍스트를 인라인 방향의 시작에 맞춥니다.
• text-align: end; 텍스트를 인라인 방향의 끝에 맞춥니다.

레벨 2의 왕관 보석: 논리적 `border-radius`

아마도 레벨 2에서 가장 중요하고 강력한 추가 기능은 국경 반지름을 논리적으로 제어하기 위한 속성 세트일 것입니다. 이전에는 카드의 모서리를 "위쪽"만 둥글게 하려면 border-top-left-radius와 border-top-right-radius를 사용했을 것입니다. 이것은 수직 쓰기 모드에서 완전히 무너집니다. 여기서 "위쪽" 모서리는 이제 start-start 및 end-start 모서리입니다.

레벨 2는 요소의 네 모서리를 흐름 상대적인 방식으로 매핑하는 네 가지 새로운 긴 속성을 도입합니다. 명명 규칙은 border-[block-edge]-[inline-edge]-radius입니다.

• border-start-start-radius: 블록-시작 및 인라인-시작 측이 만나는 모서리입니다.
• border-start-end-radius: 블록-시작 및 인라인-끝 측이 만나는 모서리입니다.
• border-end-start-radius: 블록-끝 및 인라인-시작 측이 만나는 모서리입니다.
• border-end-end-radius: 블록-끝 및 인라인-끝 측이 만나는 모서리입니다.

처음에는 이를 시각화하는 것이 까다로울 수 있으므로 다양한 쓰기 모드에 대해 매핑해 보겠습니다:

`writing-mode: horizontal-tb` (예: 영어)에서의 `border-radius` 매핑

• border-start-start-radius는 top-left-radius에 매핑됩니다.
• border-start-end-radius는 top-right-radius에 매핑됩니다.
• border-end-start-radius는 bottom-left-radius에 매핑됩니다.
• border-end-end-radius는 bottom-right-radius에 매핑됩니다.

`writing-mode: horizontal-tb`에 `dir="rtl"` (예: 아랍어)을 사용한 `border-radius` 매핑

여기서는 인라인 방향이 뒤집힙니다.

• border-start-start-radius는 top-right-radius에 매핑됩니다. (블록-시작은 위쪽, 인라인-시작은 오른쪽).
• border-start-end-radius는 top-left-radius에 매핑됩니다.
• border-end-start-radius는 bottom-right-radius에 매핑됩니다.
• border-end-end-radius는 bottom-left-radius에 매핑됩니다.

`writing-mode: vertical-rl` (예: 일본어)에서의 `border-radius` 매핑

여기서는 두 축이 회전됩니다.

• border-start-start-radius는 top-right-radius에 매핑됩니다. (블록-시작은 오른쪽, 인라인-시작은 위쪽).
• border-start-end-radius는 bottom-right-radius에 매핑됩니다.
• border-end-start-radius는 top-left-radius에 매핑됩니다.
• border-end-end-radius는 bottom-left-radius에 매핑됩니다.

이러한 새로운 속성을 사용하면 화면이 아닌 콘텐츠 흐름에 의미론적으로 연결된 모서리 반경을 정의할 수 있습니다. "시작-시작" 모서리는 언어 또는 텍스트 방향에 관계없이 항상 올바른 모서리가 됩니다.

실제 구현: 글로벌 지원 구성 요소 구축

이론은 좋지만 실제 상황을 살펴봅시다. 이전에는 물리적 속성을 사용하고 최신 논리 속성(레벨 1 및 레벨 2)을 사용하여 리팩터링한 다음 간단한 프로필 카드 구성 요소를 구축하겠습니다.

카드는 한쪽에 float된 이미지, 제목, 일부 텍스트, 장식용 테두리 및 둥근 모서리를 갖게 됩니다.

"이전" 방식: 취약하고 물리적인 속성 카드

몇 년 전에 이 카드를 어떻게 스타일링했을지 보여드리겠습니다:

/* --- CSS (물리적 속성) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

표준 영어 LTR 컨텍스트에서 이것은 괜찮게 보입니다. 그러나 dir="rtl" 또는 writing-mode: vertical-rl이 있는 컨테이너 안에 이 카드를 배치하면 레이아웃이 깨집니다. 장식 테두리가 잘못된 측에 있고, 아바타가 잘못된 측에 있고, 마진이 올바르지 않으며, 둥근 모서리가 잘못된 위치에 있습니다.

"새로운" 방식: 강력하고 논리적인 속성 카드

이제 논리적 속성을 사용하여 동일한 구성 요소를 리팩터링해 보겠습니다. 레벨 1과 레벨 2의 새로운 추가 기능을 모두 활용하겠습니다.

/* --- CSS (논리적 속성) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` 축약형은 이미 논리적입니다! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* 레벨 2 파워! */

  border-end-start-radius: 8px; /* 레벨 2 파워! */

}

.logical-card .avatar {

  float: inline-start; /* 레벨 2 파워! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

테스트 및 검증

이 새로운 CSS를 사용하면 구성 요소를 모든 컨테이너에 드롭할 수 있으며 자동으로 적응됩니다.

• LTR 컨텍스트에서: 원본 물리적 버전과 동일하게 보입니다.
• RTL 컨텍스트 (dir="rtl")에서: 아바타는 오른쪽으로 float하고, 마진은 왼쪽에 있으며, 장식 테두리는 오른쪽에 있고, 텍스트는 시작에 맞춥니다 (오른쪽). 둥근 모서리는 올바르게 오른쪽 위와 오른쪽 아래에 있습니다. 그냥 작동합니다.
• 세로 컨텍스트 (writing-mode: vertical-rl)에서: 카드의 "너비" (이제 세로 inline-size)는 300px가 됩니다. 아바타는 "위쪽" (inline-start)으로 float하고 "아래쪽" (inline-end)에 마진이 있습니다. 장식 테두리는 오른쪽 (inline-start)에 있고 둥근 모서리는 오른쪽 위와 왼쪽 위 모서리에 있습니다. 구성 요소는 미디어 쿼리나 재정의 없이 완전히 올바르게 재정렬되었습니다.

브라우저 지원 및 대체

이 모든 것이 훌륭하게 들리지만 브라우저 지원은 어떻습니까? 좋은 소식은 레벨 1 논리 속성에 대한 지원이 모든 최신 브라우저에서 훌륭하다는 것입니다. 오늘날 margin-inline-start 및 padding-block과 같은 속성을 사용하고 사용해야 합니다.

새로운 레벨 2 기능에 대한 지원은 빠르게 개선되고 있지만 아직 보편적이지는 않습니다. float, clear, 및 resize에 대한 논리 값은 잘 지원됩니다. 논리적 border-radius 속성이 가장 최신이며 여전히 기능 플래그 뒤에 있거나 최신 브라우저 버전에 있을 수 있습니다. 항상 그렇듯이 가장 최신 호환성 데이터를 얻으려면 MDN Web Docs 또는 CanIUse.com과 같은 리소스를 참조해야 합니다.

점진적 향상을 위한 전략

CSS는 복원력이 뛰어나도록 설계되었으므로 이전 브라우저에 대한 대체 기능을 쉽게 제공할 수 있습니다. 캐스케이드는 브라우저가 논리적 속성을 이해하지 못하면 단순히 무시하고 이전에 정의된 물리적 속성을 사용하도록 보장합니다.

대체 지원 CSS를 작성하는 방법은 다음과 같습니다:

.card {

  /* 이전 브라우저에 대한 대체 */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* 대체재를 재정의할 최신 논리적 속성 */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

이 접근 방식은 모든 사람에게 강력한 기본 환경을 보장하는 동시에 최신 브라우저 사용자를 위해 향상된 적응형 레이아웃을 제공합니다. 여러 쓰기 모드를 지원할 필요가 없는 프로젝트의 경우 이는 과도할 수 있습니다. 그러나 글로벌 애플리케이션, 디자인 시스템 또는 테마의 경우 이는 강력하고 미래 보장적인 전략입니다.

미래는 논리적입니다: 레벨 2 너머

물리적 사고방식에서 논리적 사고방식으로의 전환은 현대 CSS에서 가장 중요한 변화 중 하나입니다. 다양한 글로벌 웹의 현실과 우리의 스타일링 언어를 일치시킵니다. 화면 중심의 취약한 해킹에서 벗어나 복원력 있고 콘텐츠 중심적인 디자인으로 나아갑니다.

아직도 빈틈이 있습니까? 몇 개. background-position 또는 그라데이션과 같은 속성에 대한 논리적 값은 여전히 논의 중입니다. 그러나 레벨 2의 릴리스를 통해 대부분의 일상적인 레이아웃 및 스타일링 작업은 이제 순전히 논리적인 접근 방식을 사용하여 완료할 수 있습니다.

개발자에게 내려지는 행동 촉구는 분명합니다: 논리적 속성을 기본으로 사용하십시오. width 대신 inline-size를 사용하세요. margin-left와 margin-right를 별도로 설정하는 대신 margin-inline을 사용하세요. 이것은 다른 언어를 지원하는 것만이 아닙니다. 더 좋고 더 복원력 있는 CSS를 작성하는 것입니다. 논리적 속성으로 구축된 구성 요소는 LTR, RTL 또는 수직 레이아웃에서 사용되든 본질적으로 더 재사용 가능하고 적응 가능합니다. 이는 단순히 더 나은 엔지니어링입니다.

결론: 흐름을 수용하십시오

CSS 논리 속성 레벨 2는 단순한 새로운 기능 모음이 아니라 비전의 완성입니다. 콘텐츠의 자연스러운 흐름을 존중하는 레이아웃을 구축하는 데 필요한 마지막으로 중요한 조각들을 제공합니다. float: inline-start 및 border-start-start-radius와 같은 속성을 채택함으로써, 우리는 화면에 상자를 단순히 배치하는 것에서 진정으로 글로벌하고 포괄적이며 미래 보장적인 웹 경험을 설계하는 것으로 우리의 기술을 향상시킵니다.

다음에 새 프로젝트를 시작하거나 새 구성 요소를 구축할 때 margin-left를 입력하기 전에 잠시 멈추십시오. "왼쪽을 의미하는가, 아니면 시작을 의미하는가?"라고 자문해 보십시오. 이 작은 정신적 전환을 함으로써, 모든 곳의 모든 사람을 위해 더 적응 가능하고 접근 가능한 웹에 기여하게 될 것입니다.